<template>
    <el-tabs v-model="activeName"  class="tbas" >
        <el-tab-pane name="用户名">
            <span slot="label">欢迎<span style="color:black">{{userName}}</span></span>
        </el-tab-pane>
        <el-tab-pane name="会员中心">
            <span slot="label">
            <el-dropdown  @command="handleCommand">
                <el-button type="text">
                <i class="el-icon-date"></i> 会员中心
                </el-button>
                <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="订单历史"><i class="el-icon-date"></i>订单历史</el-dropdown-item>
                <el-dropdown-item command="常用联系人"><i class="el-icon-date"></i>常用联系人</el-dropdown-item>
                <el-dropdown-item command="我的收藏"><i class="el-icon-date"></i>我的收藏</el-dropdown-item>
                <el-dropdown-item command="个人设置"><i class="el-icon-date"></i>个人设置</el-dropdown-item>
                <el-dropdown-item command="充值"><i class="el-icon-date"></i>充值</el-dropdown-item>
                <el-dropdown-item command="未支付订单"><i class="el-icon-date"></i>未支付订单</el-dropdown-item>
                <el-dropdown-item command="退出登录"><i class="el-icon-date"></i>退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            </span>
        </el-tab-pane>
    </el-tabs>

</template>

<script>
export default {
    props:['userName'],
    data(){
        return {
            activeName:'用户名'
        }
    },
    methods:{
        handleCommand(command){
            switch (command) {
                case "订单历史":
                    this.$emit('changeActiceName','我的订单')
                    this.$router.push("/account/order");
                    break;
                case "常用联系人":
                    this.$emit('changeActiceName',command)
                    this.$router.push("/account/contact");
                    break;
                case "我的收藏":
                    this.$emit('changeActiceName',command)
                    this.$router.push("/account/wishlish");
                    break;
                case "个人设置":
                    this.$emit('changeActiceName',command)
                    this.$router.push("/account/setting");
                    break;
                case "充值":
                    this.$emit('changeActiceName',command)
                    this.$router.push("/account/ewallet");
                    break;
                case "未支付订单":
                    this.$emit('changeActiceName',command)
                    this.$router.push("/account/payment");
                    break;
                case "退出登录":
                    this.$emit('changeActiceName',command)
                    this.$router.push('/login')
                    break
            }
        }
    }
}
</script>

<style scoped>
.el-tabs{
    border-bottom: 1px solid #bfa;
}
.tbas{
    float: right;
    line-height: 61px;
    height: 61px;
    padding: 0px 20px;
}
</style>